<template>
<div>
  <div class="btns" v-if="identity==='teacher'">
    <el-button type="primary" @click="requiredcourseDialog = true">发布必修课程</el-button>
    <el-button @click="optionalcourse">发布选修课程</el-button>
  </div>
  <!-- 必修课弹出框 -->
  <el-dialog title="填写必修课程信息" :visible.sync="requiredcourseDialog">
    <el-form :model="form">
      <el-form-item label="课程名称" :label-width="formLabelWidth">
        <el-input v-model="form.ctitle"></el-input>
      </el-form-item>
      <el-form-item label="授课班级" :label-width="formLabelWidth">
        <el-input v-model="form.classno"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="requiredcourseDialog = false">取 消</el-button>
      <el-button type="primary" @click="requiredcourse">确 定</el-button>
    </div>
  </el-dialog>
  <!--教师 课程表单 -->
  <el-table
    :data="tableData"
    border
    max-height="500"
    style="width: 100%"
    v-if="identity==='teacher'">
    <el-table-column
      prop="c_no"
      label="课程编号">
    </el-table-column>
    <el-table-column
      prop="c_title"
      label="课程名称">
    </el-table-column>
    <el-table-column
      prop="c_type"
      label="课程类型">
    </el-table-column>
    <el-table-column
      prop="class_no"
      label="授课班级"
      width="200">
    </el-table-column>
    <el-table-column
      prop="count"
      label="授课人数">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 学生课程表单 -->
  <el-table
    :data="tableData"
    border
    max-height="540"
    style="width: 100%"
    v-if="identity==='student'">
    <el-table-column
      prop="c_no"
      label="课程编号">
    </el-table-column>
    <el-table-column
      prop="c_title"
      label="课程名称">
    </el-table-column>
    <el-table-column
      prop="c_type"
      label="课程类型">
    </el-table-column>
    <el-table-column
      prop="t_no"
      label="教师编号">
    </el-table-column>
    <el-table-column
      prop="t_name"
      label="教师姓名">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">取消选课</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import { tscourseAPI, requiredcourseAPI, optionalcourseAPI, tccourseAPI } from '@/api/teacherAPI.js'
import { sscourseAPI, cancelcourseAPI } from '@/api/studentAPI.js'

export default {
  name: 'Course',
  data () {
    return {
      tableData: [],
      no: '',
      identity: '',
      requiredcourseDialog: false,
      form: {
        tno: '',
        ctitle: '',
        classno: ''
      },
      formLabelWidth: '120px'
    }
  },
  created () {
    const info = JSON.parse(sessionStorage.getItem('token'))
    this.no = info.username
    this.identity = info.identity
    this.getTableData()
  },
  methods: {
    // 删除课程
    handleClick (row) {
      this.$confirm(`此操作将删除课程《${row.c_title}》, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.identity === 'student') {
          const params = {
            sno: this.no,
            cno: row.c_no,
            tno: row.t_no
          }
          const { data: res } = await cancelcourseAPI(params)
          if (res.status !== 200) {
            this.$message.error(res.data.msg)
          } else {
            this.$message.success(res.data.msg)
            this.getTableData()
          }
        } else {
          const params = {
            tno: this.no,
            cno: row.c_no
          }
          const { data: res } = await tccourseAPI(params)
          if (res.status !== 200) {
            this.$message.error(res.data.msg)
          } else {
            this.$message.success(res.data.msg)
            this.getTableData()
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取表格数据
    async getTableData () {
      if (this.identity === 'student') {
        const params = {
          sno: this.no
        }
        const { data: res } = await sscourseAPI(params)
        if (res.status !== 200) return this.$message.error(res.data.msg)
        this.tableData = res.data
      } else {
        const params = {
          tno: this.no
        }
        const { data: res } = await tscourseAPI(params)
        if (res.status !== 200) return this.$message.error(res.data.msg)
        this.tableData = res.data
      }
    },
    // 发布必修课程
    async requiredcourse () {
      const params = {
        tno: this.no,
        ctitle: this.form.ctitle,
        classno: this.form.classno
      }
      const { data: res } = await requiredcourseAPI(params)
      if (res.status !== 200) {
        this.$message.error(res.data.msg)
      } else {
        this.$message.success(res.data.msg)
        this.getTableData()
      }
    },
    // 发布选修课程
    async optionalcourse () {
      this.$prompt('填写必修课程名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        const params = {
          tno: this.no,
          ctitle: value
        }
        const { data: res } = await optionalcourseAPI(params)
        if (res.status !== 200) {
          this.$message.error('修改失败!')
        } else {
          this.$message.success(res.data.msg)
          this.getTableData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .btns {
    margin-bottom: 20px;
  }
</style>
